<template>
  <!-- 
    留言板组件
   -->
  <div id="app">
    <div id="hearder">留言板</div>
    <div id="message">
      <div class="mess">
        <span> 留言内容 </span>
      </div>
      <div class="inp">
        <div class="inps">
          <el-form ref="msgForm" :model="msgboardForm" label-width="80px">
            <el-form-item prop="content">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="msgboardForm.content"
                :rows="4"
                maxlength="50"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button type="success" size="mini" @click="msgboardAdd()"
              >提交内容</el-button
            >
            <el-button type="danger" size="mini">重置内容</el-button>
          </div>
        </div>
      </div>
    </div>
    <div id="messages">
      <div class="messageson" v-for="item in info" :key="item.id">
        <div class="username">
          <img
            :src="item.picture"
            style="width: 40px; height: 40px; border-radius: 3px"
          />
          <span style="margin: 12px 0px 0px 15px; font-size: 14px"
            >用户:{{ item.username }}</span
          >
        </div>
        <div class="textmsg">
          <div class="info">
            <el-alert type="info" :description="item.content" :closable="false">
            </el-alert>
          </div>
          <div class="info">
            <el-alert
              title="回复"
              type="success"
              :description="item.reply"
              :closable="false"
            >
            </el-alert>
          </div>
        </div>
      </div>
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          @current-change="change"
          :page-size="pageSize"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

import {mapState} from 'vuex'

export default {
  data() {
    return {
      info: [],
      pageSize: 3,
      pageNum: 1,
      total: null,
      msgboardForm: {
        content: "",
        username: "",
      },
    };
  },  
  methods: {
    async msgboardList() {
      let { data: res } = await this.$axios.get("/msgboard/getlist", {
        params: {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        },
      });
      // console.log(res.data.list);
      this.info = res.data.list;
      this.total = res.data.total;
    },
    // 提交内容
    async msgboardAdd() {
      let { data: res } = await this.$axios.post(
        "/msgboard/add",
        this.msgboardForm
      );
      if (res.code == 200) {
        this.$message.success("添加成功");
      }
      this.msgboardList(this.pageSize, this.pageNum);
      this.$refs["msgForm"].resetFields();
    },
    change(e) {
      this.pageNum = e;
      this.msgboardList(this.pageSize, this.pageNum);
    },
  },
  computed:{
    ...mapState({
      loginName: state => state.login.loginName
    })
  },
  created() {
    this.msgboardList(this.pageSize, this.pageNum);
    this.msgboardForm.username = this.loginName.username
    // console.log(this.username);
  },
};
</script>

<style lang="scss" scoped>
#app {
  height: 100%;
  padding: 0px;
  margin: 0px;
  #hearder {
    font-size: 40px;
    font-weight: 300;
  }
  #message {
    border: 3px solid rgba(9, 166, 194, 0.458);
    border-radius: 3px;
    width: 60%;
    margin: 0 auto;
    height: 28%;
    display: flex;
    justify-content: space-between;
    .mess {
      height: 110px;
      width: 10%;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        font-size: 20px;
      }
    }
    .inp {
      width: 85%;
      .inps {
        margin: 10px 60px 0px 0px;
      }
    }
  }
  #messages {
    border-radius: 3px;
    margin-top: 10px !important;
    width: 60%;
    margin: 0 auto;
    border: 3px solid rgba(9, 166, 194, 0.719);
    .messageson {
      border-top: 2px solid rgba(9, 166, 194, 0.278);
      width: 80%;
      height: 200px;
      margin: 10px 0px 0px 95px;
      .username {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        height: 40px;
        padding: 10px 10px 0px 10px;
      }
      .info {
        margin-top: 10px;
        padding: 0px 15px 0px 15px;
        text-align: left;
      }
    }
  }
}
</style>